<template>
	<view class="index">
		<view class="top">
			<view class="top-left">
				<view>{{$t("总资产")}}</view>
				<image :src=" eyeShow?require('../static/img/close.png'):require('../static/img/open.png')" class="img"
					@click="changeShow"></image>
			</view>
			<view>{{ type === 2 ? $t('售出盈亏') : type === 4 ? $t('可用余额') : $t('持仓盈亏') }}</view>
		</view>
		<view class="number">
			<view>{{eyeShow? userInfo.all_price  : '*****'}}</view>
			<view :class="!eyeShow?'num':'green'" v-if="type==4">
				{{!eyeShow?'*****':userInfo.price}}
			</view>
			<view :class="!eyeShow?'num':info.gain_price_in?'green':'red'" v-else>
				{{!eyeShow?'*****':type == 2 ? info.new_market_value_in : info.new_market_value_sell}}
			</view>
		</view>
		<view class="tab">
			<view class="tab-item" v-for="(i, index) in list" :key="index">
				<view class="num">{{eyeShow?i.num:'*****'}}</view>
				<view style="font-size: 25rpx;">{{i.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfoApi
	} from "@/api/api.js"
	export default {
		name: "totalAssets",
		props: ["type", "info"],
		data() {
			return {
				userInfo: {},
				eyeShow: false,
				list: [
					/* {
											name: "总资产",
											num: 422
										},
										{
											name: this.type == 2 ? '售出价值' : '持有价值',
											num: 200
										},
										{
											name: '账户余额',
											num: 222
										}, */
				]
			};
		},
		mounted() {
			this.getUserInfo()

		},
		watch: {
			type(newVal, oldVal) {

				this.list = [{
						name: this.$t("总资产"),
						num: this.userInfo.all_price
					},
					{
						name: this.type == 2 ? this.$t('售出价值') : this.$t('持有价值'),
						num: this.type == 2 ? this.info.new_market_value_in : this.info.new_market_value_sell
					},
					{
						name: this.$t('账户余额'),
						num: this.userInfo.price
					},
				]
			}
		},
		methods: {
			changeShow() {
				this.eyeShow = !this.eyeShow
			},

			getUserInfo() {
				/* const token = localStorage.getItem('token');
				let data={
					 token:token,
				} */
				userInfoApi().then(res => {
					this.userInfo = res.data.data
					console.log(res.data.data, "用户信息")

					if (this.type == 4) {
						this.list = [{
								name: this.$t("冻结余额"),
								num: this.userInfo.frozen_price
							},
							{
								name:this.$t('USD金额'),
								num: this.userInfo.recharge_money
							},
							{
								name: this.$t('初始金额'),
								num: this.userInfo.price
							},
						]
					} else {
						this.list = [{
								name: this.$t("总资产"),
								num: this.userInfo.all_price
							},
							{
								name: this.type == 2 ? this.$t('售出价值') : this.$t('持有价值'),
								num: this.type == 2 ? this.info.new_market_value_in : this.info
									.new_market_value_sell
							},
							{
								name: this.$t('账户余额'),
								num: this.userInfo.price
							},
						]

					}
				}).catch(err => {
					console.error(err)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.index {
		// height: 384rpx;
		border-radius: 30rpx;
		background-image: url('../static/img/bgImg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #a4a4af;
		font-size: 28rpx;
		font-weight: 400;

		.top {
			height: 114rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;

			.top-left {
				display: flex;

				.img {
					width: 40rpx;
					height: 40rpx;
					margin-left: 30rpx;
					display: block;
				}
			}
		}

		.number {
			padding: 0 40rpx;
			justify-content: space-between;
			font-size: 40rpx;
			font-family: FZCuHei-B03T;
			font-weight: 700;
			color: #fff;
			display: flex;
			height: 102rpx;
			border-bottom: 2rpx solid #2c304e;

			.num {
				color: #fff;
			}
		}

		.tab {
			height: 166rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;

			.tab-item {
				flex: 1;
				text-align: center;

				.num {
					font-weight: 700;
					color: #fff;
					margin-bottom: 14rpx;
				}
			}
		}
	}
</style>